<template>
  <div class="login">
    <div class="login-container">
      <div class="title">系统登录</div>
      <!-- 将登录错误提示移动到标题下方 -->
      <div class="login-error" v-if="loginError">
        <span class="error-icon">×</span>
        {{ loginError }}
      </div>
      <div class="form-container">
        <div class="input-container">
          <input type="text" placeholder="请输入账号" 
            v-model="username" @blur="validateUsername" >
          <div class="error-message" v-if="usernameError">{{ usernameError }}</div>
        </div>
        <div class="input-container">
          <input type="password"  placeholder="请输入密码" 
            v-model="password" @blur="validatePassword" >
          <div class="error-message" v-if="passwordError">{{ passwordError }}</div>
        </div>
        <button class="login-button" @click="handleLogin">登录</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 模拟用户数据
const MOCK_USER = {
  username: 'admin',
  password: '123456'
}

const username = ref('')
const password = ref('')
const usernameError = ref('')
const passwordError = ref('')
const loginError = ref('')

const validateUsername = () => {
  if (!username.value) {
    usernameError.value = '请输入账号'
  } else {
    usernameError.value = ''
  }
}

const validatePassword = () => {
  if (!password.value) {
    passwordError.value = '请输入密码'
  } else {
    passwordError.value = ''
  }
}

const handleLogin = async () => {
  // 清除之前的错误信息
  loginError.value = ''
  usernameError.value = ''
  passwordError.value = ''
  
  // 验证输入
  if (!username.value) {
    usernameError.value = '请输入账号'
    return
  }
  if (!password.value) {
    passwordError.value = '请输入密码'
    return
  }

  // 模拟登录请求
  try {
    // 这里模拟异步登录请求
    await new Promise(resolve => setTimeout(resolve, 500))
    
    if (username.value === MOCK_USER.username && password.value === MOCK_USER.password) {
      console.log('登录成功')
      // TODO: 实际项目中这里应该跳转到首页或其他页面
    } else {
      loginError.value = '登录失败，请检查用户名或密码'
    }
  } catch (error) {
    loginError.value = '登录失败，请检查用户名或密码'
  }
}
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  width: 100%;
  background-color: #2d3a4b;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-container {
    width: 350px;
    padding: 20px;
    
    .title {
      color: white;
      font-size: 30px;
      text-align: center;
      margin-bottom: 20px;
      font-weight: bolder;
      letter-spacing: 4px; 
    }

    // 调整登录错误提示的样式
    .login-error {
      background-color: #fef0f0;
      color: #f56c6c;
      padding: 8px 16px;
      border-radius: 4px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      font-size: 14px;
      
      .error-icon {
        margin-right: 8px;
        font-weight: bold;
      }
    }

    .form-container {
      position: relative;
      
      .input-container {
        margin-bottom: 40px;
        position: relative;
        
        input {
          width: 100%;
          height: 47px;
          background-color: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 5px;
          color: white;
          padding: 0 15px;
          font-size: 14px;
          outline: none;

          &::placeholder {
            color: rgba(255, 255, 255, 0.7);
          }

          &:focus {
            border-color: rgba(255, 255, 255, 0.3);
          }
        }

        .error-message {
          position: absolute;
          left: 0;
          bottom: -20px;
          color: #f56c6c;
          font-size: 12px;
        }
      }

      .login-button {
        width: 100%;
        height: 47px;
        background-color: #409EFF;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s;

        &:hover {
          background-color: #66b1ff;
        }
      }
    }
  }
}
</style>